<template>
  <el-dialog model-value="dialogVisible" :title="活动详情" width="30%" @close="handleClose">

    <el-form ref="formRef" :model="actForm" label-width="100px">
      <el-form-item label="封面" prop="imageUrl">
        <el-image style="width: 100px; height: 100px" :src="url" :zoom-rate="1.2" :preview-src-list="srcList"
          :initial-index="4" fit="cover" />
      </el-form-item>

      <el-form-item label="手机号" prop="phonenumber">
        <el-input v-model="actForm.phonenumber" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="actForm.email" />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="actForm.status">
          <el-radio :label="'0'">正常</el-radio>
          <el-radio :label="'1'">禁用</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item label="备注" prop="remark">
        <el-input v-model="actForm.remark" type="textarea" :rows="4" />
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script setup>

import { defineEmits, defineProps, ref, watch } from "vue";
import requestUtil, { getServerUrl } from "@/utils/request";
import { ElMessage } from 'element-plus'

const formRef = ref(null)

const props = defineProps(
  {
    id: {
      type: Number,
      default: -1,
      required: true
    },
    dialogVisible: {
      type: Boolean,
      default: false,
      required: true
    }
  }
)


const actForm = ref({
  id: -1,
  username: "",
  password: "123456",
  status: "0",
  phonenumber: "",
  email: "",
  remark: ""
})


watch(async () => {
  dialogVisible.value = props.dialogVisible;
  let id = props.id;
  if (id != -1) {
    const res = await requestUtil.get('' + props.id);
    if (res.data.code === 200) {
      actForm.value = res.data.actFrom;
    } else {
      ElMessage[{
        type: 'error',
        message: res.data.msg
      }]
    }
  }
}
)


const emits = defineEmits(['update:modelValue', 'initUserList'])

const handleClose = () => {
  emits('update:modelValue', false)
}
</script>

<style scoped>

</style>
